<template>
    <div class="bodys">
        <SelectComponent @clickHandler="clickHandler" :data="majorCourseList"></SelectComponent>
        <!--综合排序-->
        <div class="order-container container">
            <span @click="allSortHandler(1)" class="order-item" :class="{active: 1 === index}">{{1===index?'综合排序':'综合'}}</span>
            <span @click="countSortHandler(2)" class="order-item" :class="{active: 2 === index}">{{2===index?'销量由高到低': '销量'}}</span>
            <span @click="viewSortHandler(4)" class="order-item" :class="{active: 4 === index}">{{4===index?'浏览量由高到低':'浏览量'}}</span>
            <!--<span >价格 <img src="./images/向下箭头.svg" style="width: 10px"></span>-->
            <el-dropdown class="order-item price">
                  <span class="el-dropdown-link" style="font-size: initial">
                    价格<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item><span @click="clickVideoCoursePriceDesc">价格由高到低</span></el-dropdown-item>
                        <el-dropdown-item><span @click="clickVideoCourseAsc">价格由低到高</span></el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <span @click="timeSortHandler(6)" class="order-item" :class="{active: 6 === index}">{{6===index?'发布时间由近及远':'发布时间'}}</span>
        </div>
    
        <!--视频列表-->
        <div class="card_content_wrapper container">
            <ul v-loading="isLoading" class="loadMoreList">
                <li class="content_card_item" v-for="item in majorCourseVideoList" :key="item.id">
                    <div class="cover">
                        <img style="width: 224px;height: 125px; border-radius: 3px" :src="item.cover[0] " alt="">
                        <img class="play_icon" src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png" alt="">
                        <!--<span class="subject_card">{{item.subjectTag}}</span>-->
                    </div>
                    <div class="moment_detail">
                        <div class="card_detail">
                            <span class="title">{{item.title}}</span>
                            <div class="viewCount isVipFreeCustom">
                                <div class="price">
                                    <div>
                                        <span style="font-size: 14px;">￥</span>
                                        {{item.moreBackup.price}}
                                    </div>
                                </div>
                                <span class="num">
                                 剩余{{item.moreBackup.studentMax}}个名额
                            </span>
                            </div>
                            <div class="interrelated_info  vip_free">
                                <!--<div class="vip_free_icon"> </div>-->
                                <span class="praiseCount">
                                    <img class="icon-card_love" style="margin-right: 3px" src="./images/定位.svg" alt="">
                                    <span class="num_info"  style="margin-right: 12px" >{{item.cityName}}</span>
                                </span>
                                <span class="favoriteCount">
                                    <span class="num_info">开课日期: {{time(item.moreBackup.startDate)}}</span>
                                </span>
                            </div>
                        </div>
                        <div class="creator_info">
                            <div class="info">
                                <img class="avatarClass" :src="item.creatorBackup.avatar" alt="">
                                <span class="creator_name" :title="item.creatorBackup.name">{{item.creatorBackup.name}}</span>
                                <img class="certified_icon" src="https://rs.dance365.com/authenticate_personal@3x.png" alt="">
                            </div>
                            <span class="uploadTime">{{time(item.createTime)}}</span>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="loadMore" @click="loadMoreClick">加载更多</div>
        </div>
        
    </div>
</template>

<script setup lang="ts">

import videoCourseApi from "@/api/course/videoCourse";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import SelectComponent from '../components/SelectComponent/index.vue';

const isLoading = ref<boolean>(false);

// 重置按钮
// const isSHow = ref(false)





const value1 = ref('')
const value2 = ref('')

const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'
const defaultTime2: [Date, Date] = [
    new Date(2000, 1, 1, 12, 0, 0),
    new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'


const majorList = ref<any>([])
const pageSize = ref(20);
const pageNum = ref(0)
const clickHandler = ($event:any) => {
    pageNum.value = 1
    if (majorCourseVideoList.value == false) {
        pageNum.value = 0
    }
    getMajorCourseVideoListAsync();

}
const majorCourseList = ref<any>( [
    {
        "choises": [
            {
                "name": "古典舞",
                "id": "402881ed649d628e01649d636ea7005b"
            },
            {
                "name": "民族舞",
                "id": "402881ed649d628e01649d636ea7005a"
            },
            {
                "name": "中国舞",
                "id": "ff80808167bef94f0167bf6f6e0a1fd2"
            },
            {
                "name": "舞蹈教学",
                "id": "ff80808167d9e1280167e45526397383"
            },
            {
                "name": "教师班",
                "id": "ff808081689a167801689c8875f233e8"
            },
            {
                "name": "中国舞基本功",
                "id": "ff8080816be03044016be049fffa0b9c"
            },
            {
                "name": "少儿舞蹈",
                "id": "402881ed649d628e01649d636ea80067"
            },
            {
                "name": "少儿师资培训",
                "id": "ff8080816900ecc60169051b2ec372b5"
            },
            {
                "name": "成人舞蹈",
                "id": "ff8080816960e987016962b2af0f5323"
            },
            {
                "name": "运营管理",
                "id": "ff808081699fde090169afe2e4fd4bf9"
            },
            {
                "name": "原创编舞",
                "id": "ff80808167d9dd620167e457f899789a"
            },
            {
                "name": "毯子功",
                "id": "ff808081682b399d0168314aab0d7393"
            },
            {
                "name": "师资培训",
                "id": "ff8080816a1f580e016a20aabacc1241"
            },
            {
                "name": "企业培训",
                "id": "ff8080817ae7827e017aec4b25e07d8a"
            },
            {
                "name": "现代舞",
                "id": "402881ed649d628e01649d636ea70058"
            },
            {
                "name": "中国风",
                "id": "ff80808167c026c90167c1fbde74258b"
            }
        ],
        "formType": "multiple_select",
        "label": "兴趣技能",
        "name": "avocation",
        "style": "smallRect",
        "valueType": "JsonArray"
    },
    {
        "choises": [
            {
                "name": "培训班",
                "id": "402881bb60f8eae00160f8eaf8bb0038"
            },
            {
                "name": "大师课",
                "id": "402881bb60f8eae00160f8eaf8bb0039"
            },
            {
                "name": "教师班/师资班",
                "id": "402881bb60f8eae00160f8eaf8bb0040"
            },
            {
                "name": "进修班/研修班",
                "id": "402881bb60f8eae00160f8eaf8bb0037"
            },
            {
                "name": "讲座/论坛/峰会",
                "id": "402881bb60f8eae00160f8eaf8bb0036"
            },
            {
                "name": "游学/夏令营/冬令营",
                "id": "402881bb60f8eae00160f8eaf8bb0035"
            }
        ],
        "formType": "multiple_select",
        "label": "课程类别",
        "name": "majorCourseType",
        "style": "smallRect",
        "valueType": "JsonArray"
    },
    {
        "choises": [
            {
                "name": "免费",
                "id": "eq_0"
            },
            {
                "name": "0-500元",
                "id": "range_0_500"
            },
            {
                "name": "500-1000元",
                "id": "range_500_1000"
            },
            {
                "name": "1000-2000元",
                "id": "range_1000_2000"
            },
            {
                "name": "2000-3000元",
                "id": "range_2000_3000"
            },
            {
                "name": "3000-4000元",
                "id": "range_3000_4000"
            },
            {
                "name": "4000-5000元",
                "id": "range_4000_5000"
            },
            {
                "name": "5000-10000元",
                "id": "range_5000_10000"
            },
            {
                "name": "10000元以上",
                "id": "gt_100000"
            }
        ],
        "formType": "multiple_select",
        "label": "价格区间",
        "name": "priceRange",
        "style": "smallRect",
        "valueType": "JsonArray"
    },
    {
        "choises": [],
        "formType": "address",
        "label": "上课地点",
        "name": "cityId",
        "style": "address",
        "valueType": "JsonArray"
    },
    {
        "choises": [],
        "formType": "date",
        "label": "开课日期",
        "name": "startClassDate",
        "style": "date",
        "valueType": "JsonArray"
    },
    {
        "choises": [
            {
                "groupType": "learningGoals",
                "name": "舞蹈教学",
                "id": "fec9b0de3766fefebaa95ffa493f1915"
            },
            {
                "groupType": "learningGoals",
                "name": "个人提升",
                "id": "f6f1ed341e5ce4f6e76360e237e6b0ce"
            },
            {
                "groupType": "learningGoals",
                "name": "进修学习",
                "id": "28fb82e6f3023f5142ddd37c2032571a"
            },
            {
                "groupType": "learningGoals",
                "name": "动作分析",
                "id": "2e84ff943a0b56337e44606d534fe6c7"
            },
            {
                "groupType": "learningGoals",
                "name": "少儿舞蹈教学",
                "id": "f7229851fa8efad7123b629f3575f116"
            },
            {
                "groupType": "learningGoals",
                "name": "提高综合能力",
                "id": "c32252c1d215e4f61d5b6fc9202d4dbc"
            },
            {
                "groupType": "learningGoals",
                "name": "中国舞",
                "id": "4df47b232b82add7e787f153995b748b"
            },
            {
                "groupType": "learningGoals",
                "name": "中国民族民间舞蹈",
                "id": "5315fb79322ad1aa8898a72a0f14cc44"
            },
            {
                "groupType": "learningGoals",
                "name": "个人成长",
                "id": "7d36c23e947e6a070f0a44366ec433d9"
            },
            {
                "groupType": "learningGoals",
                "name": "中国民族民间舞考级教材",
                "id": "820e957dbe689c5760ac338488b2af32"
            },
            {
                "groupType": "learningGoals",
                "name": "幼儿舞蹈",
                "id": "c6fa90a9a63d99df4eb44752a42ee5e4"
            },
            {
                "groupType": "learningGoals",
                "name": "民族民间舞",
                "id": "ee60481ae38f92648750056763ebbcdd"
            },
            {
                "groupType": "learningGoals",
                "name": "专业表演",
                "id": "f79bc1fc58d0be13ed45994eea56df5c"
            },
            {
                "groupType": "learningGoals",
                "name": "创新创造",
                "id": "6587b112df0e668414d9fa2d786b08fb"
            },
            {
                "groupType": "learningGoals",
                "name": "成人班",
                "id": "818d9add1e3b254da5bdf8b95bba2890"
            },
            {
                "groupType": "learningGoals",
                "name": "参加比赛",
                "id": "b1911a7e90abf984d022d00e8fec36e5"
            }
        ],
        "formType": "multiple_select",
        "label": "学习目标",
        "name": "learningGoals",
        "style": "smallRect",
        "valueType": "JsonArray"
    },
    {
        "choises": [
            {
                "groupType": "learningAges",
                "name": "社会舞蹈教师",
                "id": "00b8a2446b08eef0cc9fa38234d1f922"
            },
            {
                "groupType": "learningAges",
                "name": "舞蹈爱好者",
                "id": "3ddff42e8fb9dee4a8805e94e8ed0c4b"
            },
            {
                "groupType": "learningAges",
                "name": "学校教师",
                "id": "da8ba707c968fe4fed35bfa21bd85e31"
            },
            {
                "groupType": "learningAges",
                "name": "有一定舞蹈基础",
                "id": "09f67de5285499ec843995e04bf388f8"
            },
            {
                "groupType": "learningAges",
                "name": "舞蹈教师",
                "id": "9eca61932c366e59a9b6ade6fcfa139b"
            },
            {
                "groupType": "learningAges",
                "name": "不限年龄",
                "id": "7a2b7decd256eab32763b866869f4016"
            },
            {
                "groupType": "learningAges",
                "name": "在校大学生",
                "id": "a5d281d897ab4c5d503fc0ddabc5b561"
            },
            {
                "groupType": "learningAges",
                "name": "幼师",
                "id": "f3abc28d68831e62f0fcc7340f67bee9"
            },
            {
                "groupType": "learningAges",
                "name": "16岁以上",
                "id": "f48bbade61340550622997e6cd3c0c03"
            },
            {
                "groupType": "learningAges",
                "name": "零基础学员",
                "id": "575bdc77b69eee0cb33459a734bc1633"
            },
            {
                "groupType": "learningAges",
                "name": "老师",
                "id": "2eeeaeb73f2be82aaf055883befac21a"
            },
            {
                "groupType": "learningAges",
                "name": "成人（18岁以上）",
                "id": "417f287fb154943390bb0f003fc5490b"
            },
            {
                "groupType": "learningAges",
                "name": "短期集训",
                "id": "bbf5ff0407457e2f20ec7c7808757630"
            },
            {
                "groupType": "learningAges",
                "name": "0基础",
                "id": "c56b6a03633aefaa8806886724d51431"
            },
            {
                "groupType": "learningAges",
                "name": "在读学生",
                "id": "0d222f82853faf46c1e4fb9e364cf069"
            },
            {
                "groupType": "learningAges",
                "name": "艺考生",
                "id": "522cf3ed61e315d17eefee7a17c3879b"
            }
        ],
        "formType": "multiple_select",
        "label": "适学年龄",
        "name": "learningAges",
        "style": "smallRect",
        "valueType": "JsonArray"
    },
    {
        "choises": [
            {
                "name": "零基础",
                "id": "70"
            },
            {
                "name": "业余初级",
                "id": "10"
            },
            {
                "name": "业余中级",
                "id": "20"
            },
            {
                "name": "业余高级",
                "id": "30"
            },
            {
                "name": "专业初级",
                "id": "40"
            },
            {
                "name": "专业中级",
                "id": "50"
            },
            {
                "name": "专业高级",
                "id": "60"
            }
        ],
        "formType": "multiple_select",
        "label": "难易度",
        "name": "difficultDegree",
        "style": "smallRect",
        "valueType": "JsonArray"
    }
])



const getMajorListAsync = async () => {
    const res =  await videoCourseApi.getMajorCourse();
    majorList.value = res;
}

function time (time3:number){
    var date = new Date(time3);
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    return Y.slice(2) + M + D;
}

// 点击加载更多
const loadMoreClick = async () => {
    pageNum.value+=1;
    isLoading.value = true;
    const res =  await videoCourseApi.getMajorCourseVideoList(pageSize.value, pageNum.value);
    isLoading.value = false;
    majorCourseVideoList.value = majorCourseVideoList.value.concat(res.content);
}
// 滚动条事件
const windowScroll = async () => {
    //获取操作元素最顶端到页面顶端的垂直距离
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // windowHeight是可视区的高度
    const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    // scrollHeight是滚动条的总高度
    const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight;
    const scrollTops = offsetHeight - windowHeight;
    // 滚动条到底部
    if (scrollTop/(offsetHeight - windowHeight) >=1) {
        // 到了底部之后想做的操作,如到了底部之后加载
        isLoading.value = true;
        pageNum.value +=1;
        const res = await videoCourseApi.getMajorCourseVideoList(pageSize.value,pageNum.value);
        isLoading.value = false;
        res.content.forEach((item:any) => {
            majorCourseVideoList.value.push(item);
        })
        window.removeEventListener('scroll', windowScroll)
    }
}


const majorCourseVideoList = ref<any>([])
onMounted(() => {
  
    // getMajorListAsync();
    getMajorCourseVideoListAsync();
    //绑定浏览器的滚动事件
    window.addEventListener('scroll', windowScroll);
})
const getMajorCourseVideoListAsync = async () => {
    const res = await videoCourseApi.getMajorCourseVideoList(pageSize.value, pageNum.value);
    majorCourseVideoList.value = res.content;
}



const index  = ref(0);
const allSortHandler = (ind:number) => {
    index.value = ind;
    pageNum.value = 3;
    getMajorCourseVideoListAsync();
}
const countSortHandler = async (ind:number) => {
    index.value = ind;
    const res = await videoCourseApi.majorCourseSellCountDesc(pageSize.value, pageNum.value);
    majorCourseVideoList.value = res.content;
}
const viewSortHandler = async (ind:number) => {
    index.value = ind;
    const res = await videoCourseApi.majorCourseViewCountDesc(pageSize.value, pageNum.value);
    majorCourseVideoList.value = res.content;
}
const timeSortHandler = async (ind:number) => {
    index.value = ind;
    const res = await videoCourseApi.majorCourseOnSellTimeDesc(pageSize.value, pageNum.value);
    majorCourseVideoList.value = res.content;
}

// 按价格由高到低排序
const clickVideoCoursePriceDesc = async () =>  {
    const res = await videoCourseApi.majorCoursePriceDesc(pageSize.value, pageNum.value);
    majorCourseVideoList.value = res.content;
}
// 按价格有低到高排序
const clickVideoCourseAsc = async () => {
    const res = await videoCourseApi.majorCoursePriceAsc(pageSize.value, pageNum.value);
    majorCourseVideoList.value = res.content;
    
}
</script>


<style scoped>
* {
    margin: 0;
    padding: 0;
}
.bodys {
    background-color: #f5f7f9!important;
    overflow: hidden;
}
.container {
    width: 1200px;
    margin: 20px auto 20px;
}


.order-container {
    clear: both;
    height: 80px;
    margin: 10px auto 0;
    border-radius: 3px;
    background-color: #fff
}
.order-container .order-item {
    display: inline-block;
    font-size: 14px;
    color: #7d8090;
    cursor: pointer;
    margin-top: 32px;
}
.order-container .order-item:nth-child(1) {
    margin-left: 30px;
}
.order-container .order-item:not(:nth-child(1)){
    margin-left: 60px;
}
.order-item.price {
    position: relative;
}
.price-order {
    position: absolute;
    visibility: hidden;
    top: 520px;
    left: 550px;
    width: 100px;
    height: 90px;
    /*color: #fff;*/
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #fff;
    box-shadow:1px 2px 3px 4px #ccc;
}
.price-order .menu-item {
    padding: 17px 0;
    text-align: center;
    font-size: 14px;
    color: #111;
    cursor: pointer;
    
}

.order-item.active {
    color: #ff4683;
}
/*视频*/
.card_content_wrapper {
    /*background-color: #099;*/
    margin-top: 20px;
    padding-bottom: 20px;
}
.loadMoreList {
    display: flex;
    flex-wrap: wrap
}
.card_content_wrapper .loadMoreList>.content_card_item:not(:nth-child(5n)) {
    margin-right: 20px;
}
.loadMoreList .content_card_item {
    width: 224px;
    background-color: #fff;
    margin-bottom: 20px;
    display: block;
    border-radius: 5px;
}
.content_card_item .cover {
    position: relative;
}
.content_card_item .cover .play_icon {
    position: absolute;
    bottom: 6px;
    left: 10px;
    display: inline-block;
    width: 30px;
    height: 30px;
}
.content_card_item .subject_card {
    position: absolute;
    color: #fff;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(0,0,0,.6);
}
.content_card_item .moment_detail {
    width: 100%;
    color: #b1b5c1;
    height: 155px;
}

.content_card_item .moment_detail .card_detail {
    display: flex;
    flex-direction: column;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 13px;
    border-bottom: 1px solid #ebeced;
    height: 104px;
}
.content_card_item .moment_detail .card_detail .title {
    font-size: 14px;
    color: #111;
    padding-top: 10px;
    padding-bottom: 0;
    line-height: 18px;
    height: 45px;
    width: 100%;
}
.content_card_item .moment_detail .card_detail .viewCount.isVipFreeCustom {
    /*margin-top: 20px;*/
    height: 32px;
    line-height: 22px;
    padding-bottom: 7px;
    display: flex;
    justify-content: space-between;
}
.content_card_item .moment_detail .card_detail .viewCount .price {
    color: #f93684;
    font-size: 16px;
    transform: translateY(-2px);
}
.interrelated_info  .vip_free {
    display: flex;
}
.interrelated_info .vip_free_icon {
    width: 38px;
    height: 14px;
    background-size: cover;
}
.praiseCount {
    margin-right: 30px;
}
.num_info {
    width: 50px;
    font-size: 10px;
}
.favoriteCount {
    margin-left: 5px;
}
.favoriteCount .num_info {
    font-size: 10px;
}
.icon-card_love {
    width: 13px;
}
.creator_info {
    display: flex;
    justify-content: space-between;
}
.creator_info .info {
    display: flex;
    align-items: center;
    align-content: center;
}
.creator_info .info .avatarClass {
    width: 24px;
    height: 24px;
    margin-left: 10px;
    /*margin-top: 10px;*/
}
.creator_info .info .creator_name {
    display: inline-block;
    height: 20px;
    color: #111;
    cursor: pointer;
    font-size: 12px;
    margin-left: 8px;
    margin-top: 13px;
    max-width: 68px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.creator_info .info .certified_icon {
    margin-top: 8px;
    width: 12px;
    height: 12px;
}
.creator_info .uploadTime {
    margin-top: 12px;
    margin-right: 12px;
}
/*课程分类end*/

.loadMore {
    width: 140px;
    height: 40px;
    margin: 50px auto;
    font-size: 14px;
    color: #82858e;
    cursor: pointer;
    text-align: center;
    background-color: #fff;
    line-height: 40px;
    border-radius: 4px;
}

</style>